{extend name='admin@main'}
{block name='content'}
<style>
    .store-total-container {
        font-size: 14px;
        margin-bottom: 20px;
        letter-spacing: 1px;
    }
    .store-total-container .store-total-icon {
        top: 45%;
        right: 8%;
        font-size: 65px;
        position: absolute;
        color: rgba(255, 255, 255, 0.4);
    }
    .store-total-container .store-total-item {
        color: #fff;
        line-height: 4em;
        padding: 15px 25px;
        position: relative;
    }
    .store-total-container .store-total-item > div:nth-child(2) {
        font-size: 46px;
        line-height: 46px;
    }
    @media screen and (max-device-width: 768px) {
        .online{
            width:50%;
        }
    }
    @media screen and (min-device-width: 992px) {
        .online{
            width:73%;
        }
        .game_distribution{
            width:50%;
        }
        .game_distribution2{
            width:100%;
        }
    }
</style>
<div class="think-box-shadow store-total-container notselect" >
    <div class="layui-row layui-col-space15" >
        <!--<div class="layui-col-sm6 layui-col-md3 online"  >-->
            <div class="margin-bottom-15">留存线图 <b style="font-size: 12px;color: #ccc;" >30天</b></div>
            <div id="games_online" style="height:350px;width:100%;" >
            </div>
        <!--</div>-->
    </div>
</div>
</div>
<div class="think-box-shadow store-total-container notselect" >
    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm6 layui-col-md2 game_distribution" >
            <div class="margin-bottom-15">新增玩家分布 <b style="font-size: 12px;color: #ccc;" >30天</b></div>
            <div id="game_Billing_point" style="height:800px;" >
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md2 game_distribution"  >
            <div class="margin-bottom-15">活跃玩家分布 <b style="font-size: 12px;color: #ccc;" >30天</b></div>
            <div id="games_recharge" style="height:800px;" >
            </div>
        </div>
    </div>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm6 layui-col-md2 game_distribution2"  >
            <div class="margin-bottom-15">玩家充值分布 <b style="font-size: 12px;color: #ccc;" >30天</b></div>
            <div id="user_recharge" style="height:800px;" >
            </div>
        </div>
    </div>
</div>
<script>
    require(['echarts'], function (echarts, chart) {
        chart = echarts.init(document.getElementById('games_online'));
        window.onresize = chart.resize;
        option = {
            tooltip : {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data:['次日留存','3日留存','7日留存','15日留存']
            },
            toolbox: {
                orient: 'vertical',
                x: 'right',
                y: 'center',
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar', 'stack']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : false,
                    data :eval('{:json_encode($user_thirty_day_remain.time)}')
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    axisLabel: {
                        color: '#2f9de2',
                        formatter: "{value}%"
                    },
                    splitLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: '#cccccc'
                        }
                    }
                }
            ],
            series : [
                {
                    name:'次日留存',
                    type:'line',
                    tiled: '总量',
                    /*label: {normal: {show: true, position: ['30%', '-100%'], offset: [10, -1], formatter: "{c}"}},*/
                    data: eval('{:json_encode($user_thirty_day_remain.second_day_count)}'),
                    lineStyle: {
                        normal: {
                            color: '#e2612f',
                            width: 1,
                            /* type: 'dashed'*/
                        }
                    },
                    itemStyle: {
                        normal: {
                            borderWidth: 1,
                            borderColor: '#e2612f',
                            color: '#e2612f'
                        }
                    }
                },{
                    name:'3日留存',
                    type:'line',
                    tiled: '总量',
                    /*label: {normal: {show: true, position: ['30%', '-100%'], offset: [10, -1], formatter: "{c}"}},*/
                    data: eval('{:json_encode($user_thirty_day_remain.third_day_count)}'),
                    lineStyle: {
                        normal: {
                            color: '#3b3f70',
                            width: 1,
                            /* type: 'dashed'*/
                        }
                    },
                    itemStyle: {
                        normal: {
                            borderWidth: 1,
                            borderColor: '#3b3f70',
                            color: '#3b3f70'
                        }
                    }
                },
                {
                    name:'7日留存',
                    type:'line',
                    tiled: '总量',
                    /*label: {normal: {show: true, position: ['30%', '-100%'], offset: [10, -1], formatter: "{c}"}},*/
                    data: eval('{:json_encode($user_thirty_day_remain.seventh_day_count)}'),
                    lineStyle: {
                        normal: {
                            color: '#2f9de2',
                            width: 1,
                            /* type: 'dashed'*/
                        }
                    },
                    itemStyle: {
                        normal: {
                            borderWidth: 1,
                            borderColor: '#2f9de2',
                            color: '#2f9de2'
                        }
                    }
                },
                {
                    name:'15日留存',
                    type:'line',
                    tiled: '总量',
                    /*label: {normal: {show: true, position: ['30%', '-100%'], offset: [10, -1], formatter: "{c}"}},*/
                    data: eval('{:json_encode($user_thirty_day_remain.fifth_day_count)}'),
                    lineStyle: {
                        normal: {
                            color: '#e2dc57',
                            width: 1,
                            /* type: 'dashed'*/
                        }
                    },
                    itemStyle: {
                        normal: {
                            borderWidth: 1,
                            borderColor: '#e2dc57',
                            color: '#e2dc57'
                        }
                    }
                },
            ]
        };
        chart.setOption(option);
    });
</script>
<script>
    require(['echarts'], function (echarts, chart) {
        chart = echarts.init(document.getElementById('game_Billing_point'));
        window.onresize = chart.resize;
        var seriesLabel = {
            normal: {
                show: true,
                textBorderColor: '#c543d8',
                textBorderWidth: 2
            }
        }
        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: eval('{:json_encode($user_data_info.mynewcount.channel_name)}')
            },
            grid: {
                left: 180
            },
            toolbox: {
                show: true,
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value}'
                },
                splitLine: {
                    lineStyle: {
                        type: 'dashed',
                        color: '#cccccc'
                    }
                }
            },
            yAxis: {
                type: 'category',
                inverse: true,
                data:eval('{:json_encode($user_data_info.mynewcount.channel_name)}'),
                axisLabel: {
                    margin: 20,
                    rich: {
                        value: {
                            lineHeight: 10,
                            align: 'left'
                        },
                    }
                }
            },
            series: [
                {
                    type: 'bar',
                    label: seriesLabel,
                    data: eval('{:json_encode($user_data_info.mynewcount.data)}'),
                    itemStyle: {
                        normal: {
                            borderWidth: 1,
                            color: '#1E41FF'
                        }
                    }
                }
            ]
        };
        chart.setOption(option);
    });
</script>
<script>
    require(['echarts'], function (echarts, chart) {
        chart = echarts.init(document.getElementById('games_recharge'));
        window.onresize = chart.resize;
        var seriesLabel = {
            normal: {
                show: true,
                textBorderColor: '#c543d8',
                textBorderWidth: 2
            }
        }
        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: eval('{:json_encode($user_data_info.mylogincount.channel_name)}')
            },
            grid: {
                left: 180
            },
            toolbox: {
                show: true,
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value}'
                },
                splitLine: {
                    lineStyle: {
                        type: 'dashed',
                        color: '#cccccc'
                    }
                }
            },
            yAxis: {
                type: 'category',
                inverse: true,
                data:eval('{:json_encode($user_data_info.mylogincount.channel_name)}'),
                axisLabel: {
                    margin: 20,
                    rich: {
                        value: {
                            lineHeight: 10,
                            align: 'left'
                        },
                    }
                }
            },
            series: [
                {
                    type: 'bar',
                    label: seriesLabel,
                    data: eval('{:json_encode($user_data_info.mylogincount.data)}'),
                    itemStyle: {
                        normal: {
                            borderWidth: 3,
                            color: '#1E41FF'
                        }
                    }
                }
            ]
        };
        chart.setOption(option);
    });
</script>
<script>
    require(['echarts'], function (echarts, chart) {
        chart = echarts.init(document.getElementById('user_recharge'));
        window.onresize = chart.resize;
        var seriesLabel = {
            normal: {
                show: true,
                textBorderColor: '#c543d8',
                textBorderWidth: 2
            }
        }
        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: eval('{:json_encode($user_data_info.myrecharge.channel_name)}')
            },
            grid: {
                left: 180
            },
            toolbox: {
                show: true,
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value}'
                },
                splitLine: {
                    lineStyle: {
                        type: 'dashed',
                        color: '#cccccc'
                    }
                }
            },
            yAxis: {
                type: 'category',
                inverse: true,
                data:eval('{:json_encode($user_data_info.myrecharge.channel_name)}'),
                axisLabel: {
                    margin: 20,
                    rich: {
                        value: {
                            lineHeight: 10,
                            align: 'left'
                        },
                    }
                }
            },
            series: [
                {
                    type: 'bar',
                    label: seriesLabel,
                    data: eval('{:json_encode($user_data_info.myrecharge.data)}'),
                    itemStyle: {
                        normal: {
                            borderWidth: 3,
                            color: '#1E41FF'
                        }
                    }
                }
            ]
        };
        chart.setOption(option);
    });
</script>
{/block}